<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2d变换样式</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        .box{
            width: 500px;
            margin: 50px;
            border: 2px solid aqua;
        }
        .box div{
            width: 150px;
            height: 150px;
            margin: 50px 0;
            background-color: skyblue;
        }
        .box div:nth-child(1){
            /* 
            rotateX(deg) X轴方向旋转
            rotateY(deg) Y轴方向旋转
            rotateZ(deg) Z轴方向旋转
            rotate() = rotateZ()
            rotate3d(基本用不到)
            */
            transform: rotate(40deg);
        }
        .box div:nth-child(2){
            /* 
            缩放 scale()
            值可以是小数也可以是整数，表示缩放的倍数
            负数是反向放大
            */
            transform: scale(1.2);
        }
        .box div:nth-child(3){
            /* 平移 
            translateX X方向移动
            translateY Y方向移动
            translateZ Z方向移动 2d环境无法看到
            */
            transform: translate(100px);
        }
        .box div:nth-child(4){
            /* 倾斜 */
            transform: skew(30deg,25deg);
        }
        .box div:nth-child(5){
            /* 指定坐标原点 */
            transform-origin: center center;
            transform: rotate(30deg);
        }
        /* 变换样式可以多个变换一起使用，但是需要注意先旋转再平移和先平移再旋转不同 */
    </style>
</head>
<body>
    <!-- 
        变换样式指的就是让一个元素发生形状，位置，大小的改变
        transform 变化样式
        变换样式允许通过css去改变元素的
        所有的变换样式都是让元素在视觉效果上发生变化，不会改变元素在文档中的位置
        会提升元素层级
        旋转
        缩放
        移动
        倾斜


        变换样式分为 2d环境下的变换和 3d环境下的变换
        区别就是 2d环境下只有 x 和 y 两个坐标
        3d环境下有 x y z 三个坐标
    -->
    <div class="box">
        <div>rotateX</div>
        <div>scale</div>
        <div>translate</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>